<template>
  <div style="margin-left: 25%">
    <div class="boxWidth">
      <FullCalendar ref="myCalendar" :options="calendarOptions" style="width: 700px;text-align: center" />
      <div class="anniu">
        <el-button type="primary" @click="daka" >点击打卡</el-button>
        <el-button type="primary" @click="daka">分享今日打卡计划</el-button>
      </div>
      <div id="echartsdemo" ref="container" style="border-bottom: #3a8ee6"></div>
      <div id="zhexiantu" ref="container2" style="border-bottom: #3a8ee6"></div>
      <span style="margin-left: 320px">最近打卡</span>
      <div class="ather"><template>
        <el-table
            :data="atheruser"
            stripe
            style="width: 100%">
          <el-table-column
              prop="date"
              width="300">
          </el-table-column>
          <el-table-column
              prop="name"
              width="250">
          </el-table-column>
        </el-table>
      </template></div>
<!--      排名-->
<!--      <template>-->
<!--        <el-table-->
<!--            :data="paiming"-->
<!--            stripe-->
<!--            style="width: 100%">-->
<!--          <el-table-column-->
<!--              label="排名"-->
<!--              width="180">-->
<!--            <template slot-scope="scope">-->
<!--        <span v-if="scope.$index+1===1">-->
<!--          <svg  class="icon" aria-hidden="true">-->
<!--          <use xlink:href="#icon-guanjun"></use>-->
<!--        </svg>-->
<!--        </span>-->
<!--              <span v-else-if="scope.$index+1===2">-->
<!--          <svg  class="icon" aria-hidden="true">-->
<!--          <use xlink:href="#icon-yajun"></use>-->
<!--        </svg>-->
<!--        </span>-->
<!--              <span v-else-if="scope.$index+1===3">-->
<!--          <svg  class="icon" aria-hidden="true">-->
<!--          <use xlink:href="#icon-jijun"></use>-->
<!--        </svg>-->
<!--        </span>-->
<!--              <span v-else>-->
<!--          {{scope.$index+1}}-->
<!--        </span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="name"-->
<!--              label="姓名"-->
<!--              width="180">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="num"-->
<!--              label="次数"-->
<!--              width="180">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </template>-->
<!--      点击打卡查看某天成功打卡情况-->
      <el-dialog
          :title="time"
          :visible.sync="daydaka"
          width="30%"
          :before-close="handleClose">
        <div style="background-color:rgba(220,38,38,0.1);box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width:300px;height: 110px;margin-left: 60px;margin-bottom: 25px">
          <span style="font-size: 50px;margin-left: 50px">{{daynum}}</span><span style="font-size: 50px;margin-left: 75px">{{daytime}}</span><br>
          <span style="margin-left: 60px">学习量</span><span style="margin-left: 90px">时长(分)</span>
        </div>
        <el-link type="info"  style="margin-left: 42%" @click="witch">查看详情</el-link>
      </el-dialog>
      <!--      点击打卡查看某天失败打卡情况-->
      <el-dialog
          :title="time"
          :visible.sync="daydaka2"
          width="30%"
          :before-close="handleClose">
<!--        <el-button type="info" style="margin-left: 38%">查看详情</el-button>-->
        <el-link type="info"  style="margin-left: 42%" @click="witch">查看详情</el-link>
      </el-dialog>
<!--      查看某日计划-->
      <el-dialog title="计划" :visible.sync="witchday">
        <template>
          <el-table
              ref="multipleTable"
              :data="witchdayitems"
              tooltip-effect="dark"
              style="width: 100%">
            <el-table-column
                prop="content"
                label="计划内容"
                width="500">
            </el-table-column>
            <el-table-column
                width="200"
                label="是否完成"
                show-overflow-tooltip>
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.status"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                    disabled/>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-dialog>
      <!--点击打卡看今日完成进度    -->
      <el-dialog title="今日计划" :visible.sync="dialogTableVisible">
        <template>
          <el-table
              ref="multipleTable"
              :data="todayitems"
              tooltip-effect="dark"
              style="width: 100%">
            <el-table-column
                prop="content"
                label="计划内容"
                width="500">
            </el-table-column>
            <el-table-column
                width="200"
                label="是否完成"
                show-overflow-tooltip>
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.status"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                    disabled/>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="godate_vue">去完成今日计划</el-button>
          <el-button type="primary" @click="handdaka">打卡</el-button>
        </template>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import * as ec from 'echarts'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
  components: {
    FullCalendar
  },
  name:"test",
  data() {


    return {
      //某日计划
      witchdayitems:[],
      //某日计划
      witchday:false,
      //今日计划
      todayitems:[],
      //学习量
      daynum:15,
      daytime:10,
      //点击显示时间
      time:'',
      //查看每天打卡情况开关
      daydaka:false,
      daydaka2:false,
      paiming: [{
        name:'zjc',
        num:10
      },{
        name:'zjc',
        num:8
      },{
        name:'zjc',
        num:6
      },{
        name:'zjc',
        num:1
      },
        {
          name:'zjc',
          num:1
        },
        {
          name:'zjc',
          num:1
        },],
      //其他用户打卡情况
      atheruser:[{
        date: '2016-05-02 16:24',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
        {
          date: '2016-05-02 16:24',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02 16:24',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      //表格弹框
      dialogTableVisible:false,
      //今日计划存放
      tableData:[],
      //第一个图标参数
      echartsinstance:null,
      option :{
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 10, name: '今日未完成计划' },
              { value: 5, name: '今日完成计划' },
              { value: 4, name: '过去未完成计划' },
              // { value: 4, name: 'Union Ads' },
              // { value: 4, name: 'Video Ads' }
            ]
          }
        ]
      },
      //折线图数据
      echartsinstance2:null,
      option2 :{
        title: {
          // text: 'Temperature Change in the Coming Week'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '计划数',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '完成计划数',
            type: 'line',
            data: [1, 2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      },
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        initialView: 'dayGridMonth',
        // 选择日期事件，可响应一个新建日程的事件
        select: this.handleDateSelect,
        // 点击事件对象事件
        eventClick: this.handleEventClick,
        // 点击删除标签事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete,
        // 切换语言，当前为中文
        locale: 'zh-cn',
        // 设置一周中显示的第一天是哪天，周日是0，周一是1，
        firstDay: 0,
        // 日历日程背景色
        eventColor: '#3BB2E3',
        // 设置事件的最小高度
        timeGridEventMinHeight: '20',
        // 设置日历单元格宽度与高度的比例。
        aspectRatio: 1.2,
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives', // 试用证书
        events: [
        ],
        // views: {
        // // 对应月视图
        //   dayGridMonth: {
        //     displayEventTime: false, // 是否显示时间
        //     dayCellContent(item) {
        //       const _date = formatDate(item.date).split('-')
        //       const _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2])
        //       return { html: `<p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>` }
        //     }
        //   }

        // },
        // 时隙标签格式 ，确定将在时间段内显示的文本。
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        // // 日历头部按钮位置
        headerToolbar: {
          left: 'today',
          center: 'prev title next',
          right: 'dayGridMonth,timeGridWeek,listDay'
        },
        // 标题按钮的名字
        buttonText: {
          prev: '',
          next: '',
          today: '今天',
          month: '月视图',
          week: '周视图',
          day: '日视图',
          list: '列表视图'
        },
        editable: true, // 是否可以进行（拖动、缩放）修改
        allDaySlot: false, // 周，日视图时，all-day 不显示
        displayEventTime: true, // 是否显示时间
        eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        displayEventEnd: false, // 所有视图显示结束时间
        allowContextMenu: false,
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
      }
    }
  },
  mounted() {
    this.getMyEchart()
    this.echartsinstance = ec.init(this.$refs.container)
    this.echartsinstance.setOption(this.option)
    this.echartsinstance2 = ec.init(this.$refs.container2)
    this.echartsinstance2.setOption(this.option2)
  },
  methods: {
    //某日计划
    witch(){

      this.daydaka=false
      this.daydaka2=false
      this.witchday=true
    },
    //去今日计划
    godate_vue(){

    },
    //关闭
    handleClose(){
      this.daydaka=false
      this.daydaka2=false
      this.witchday=false
    },
    //上传打卡信息
    handdaka(){
      let day =new Date()
      let day1 = day.getDate()
      let year = day.getFullYear()
      let month = day.getMonth()
      let date = year+'-'+(month<10?('0'+(month+1).toString()):month+1)+'-'+(day1<10?('0'+day1.toString()):day1)
      this.calendarOptions.events.push({ title: '已打卡', date: date, classNames: ['cal'] })
      this.dialogTableVisible=false
      this.$message.success('打卡成功')
    },
    //是否已打卡
    daka(){
      let day =new Date()
      let day1 = day.getDate()
      let year = day.getFullYear()
      let month = day.getMonth()
      let date = year+'-'+(month<10?('0'+(month+1).toString()):month+1)+'-'+(day1<10?('0'+day1.toString()):day1)
      let f=1
      console.log(date)
      this.calendarOptions.events.forEach(ele=>{
        // console.log(ele)
        if(ele.date===date) {
          f = 0
        }
      })
      if(f==1){
        this.dialogTableVisible=true

      }else{
        this.$message.error('今日已打卡')
      }



    },
    handleDateClick: function(arg) {
      alert('date click! ' + arg.dateStr)
    },
    getMyEchart() {
      console.log('啥也没有')
    },

    // methods中定义相应的事件
    handleDateSelect(selectInfo) {
      let f=0;
      this.calendarOptions.events.forEach(ele=>{
        if(ele.date===selectInfo.startStr){
          f=1
        }
      })
      console.log()
      // if(selectInfo === )
      if(f===1){
        this.time=selectInfo.startStr+'已打卡'
        this.daydaka=true
      }else{
        this.time=selectInfo.startStr+'未打卡'
        this.daydaka2=true
      }
      // const title = prompt('请添加今日日程')
      // const calendarApi = selectInfo.view.calendar
      // calendarApi.unselect() // clear date selection
      // if (title) {
      //   calendarApi.addEvent({
      //     id: '13213541344131841324da1',
      //     title: '',
      //     start: selectInfo.startStr,
      //     end: selectInfo.endStr,
      //     allDay: selectInfo.allDay,
      //     classNames: ['cal']
      //   })
      // }
    },
    handleEventClick(clickInfo) {
      // console.log(clickInfo.event)
        this.time=clickInfo.event.startStr+'已打卡'
        this.daydaka=true
    }

  }
}
</script>
<style scoped lang="less">
#echartsdemo{
  width:600px;
  height: 400px;
  //float: left;
  display: block;
  margin-left: 50px;
}
#zhexiantu{
  width: 600px;
  height: 650px;
  //float: left;
  display: block;
  margin-left: 50px;
}
.anniu{
  //float: left;
  text-align: center;
}
.boxWidth{
  width: 700px;
  height: 650px;
 }
.ather{
  margin-left: 100px;
}
</style>
